 <!DOCTYPE html>
<html>
  <head>
    <META charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="..//vxe-table/vxe-table.css"/>
    <style>
    </style>

  </head>
  <body>
    <div id="app">
        <vxe-table
          border
          resizable
          :tree-config="{children: 'children', accordion: true}"
          :data="tableData">
          <vxe-table-column field="name" title="Name" tree-node></vxe-table-column>
          <vxe-table-column field="size" title="Size"></vxe-table-column>
          <vxe-table-column field="type" title="Type"></vxe-table-column>
          <vxe-table-column field="date" title="Date"></vxe-table-column>
        </vxe-table>
    </div>
    <script src="../vue.min.js"></script>
    <script src="xe-utils.min.js"></script>
    <script src="vxe-table.min.js"></script>
    <script>
window.data = JSON.parse('[{"id":"10000","parentId":null,"name":"文件夹 10000","size":"53k","type":"","date":"2019-10-22","childCols":[],"childData":[],"children":[{"id":"11000","parentId":"10000","name":"vxe-table 从入门到放弃.avi","size":"11k","type":"avi","date":"2019-05-21","childCols":[],"childData":[],"checked":false},{"id":"12000","parentId":"10000","name":"文件夹 12000","size":"22k","type":"","date":"2019-08-16","childCols":[],"childData":[],"children":[{"id":"12100","parentId":"12000","name":"vxe-table 从入门到放弃 12100.png","size":"60k","type":"","date":"2019-08-20","childCols":[],"childData":[],"children":[{"id":"12110","parentId":"12100","name":"某个页面 12110.html","size":"100k","type":"html","date":"2019-05-19","childCols":[],"childData":[],"checked":false}],"checked":false},{"id":"122000","parentId":"12000","name":"xxx 122000.avi","size":"80k","type":"avi","date":"2019-04-18","childCols":[],"childData":[],"checked":false},{"id":"123000","parentId":"12000","name":"文件夹 123000","size":"","type":"","date":"2019-06-17","childCols":[],"childData":[],"children":[{"id":"123100","parentId":"123000","name":"vxe-table 从入门到放弃 123100.avi","size":"105k","type":"avi","date":"2019-05-16","childCols":[],"childData":[],"checked":false},{"id":"123200","parentId":"123000","name":"文件 123200.avi","size":"105k","type":"avi","date":"2019-02-20","childCols":[],"childData":[],"checked":false},{"id":"123300","parentId":"123000","name":"vxe-table 从入门到放弃 123300.txt","size":"18k","type":"txt","date":"2019-04-21","childCols":[],"childData":[],"checked":false}],"checked":false},{"id":"124000","parentId":"12000","name":"vxe-table 放弃指南 124000.mp4","size":"860k","type":"mp4","date":"2019-01-27","childCols":[],"childData":[],"checked":false},{"id":"125000","parentId":"12000","name":"vxe-table 入坑指南 125000.avi","size":"660k","type":"avi","date":"2019-09-12","childCols":[],"childData":[],"checked":false},{"id":"126000","parentId":"12000","name":"vxe-table 填坑系列 126000.avi","size":"320k","type":"avi","date":"2019-07-29","childCols":[],"childData":[],"checked":false}],"checked":false}],"checked":false},{"id":"20000","parentId":null,"name":"vxe-table 入坑系列 20000.png","size":"66k","type":"png","date":"2019-08-23","childCols":[],"childData":[],"checked":false},{"id":"30000","parentId":null,"name":"文件夹 30000","size":"3k","type":"","date":"2019-05-14","childCols":[],"childData":[],"children":[{"id":"31000","parentId":"30000","name":"文件夹 31000","size":"9k","type":"","date":"2019-07-24","childCols":[],"childData":[],"children":[{"id":"31100","parentId":"31000","name":"从入门到放弃 31100.js","size":"40k","type":"js","date":"2019-05-27","childCols":[],"childData":[],"checked":false},{"id":"31200","parentId":"31000","name":"文件 31200","size":"224k","type":"java","date":"2019-10-25","childCols":[],"childData":[],"checked":false}],"checked":false},{"id":"32000","parentId":"30000","name":"文件夹 32000","size":"33k","type":"","date":"2019-05-25","childCols":[],"childData":[],"children":[{"id":"32100","parentId":"32000","name":"vxe-table 从入门到废弃 32100.mp4","size":"35k","type":"mp4","date":"2019-05-28","childCols":[],"childData":[],"checked":false},{"id":"32200","parentId":"32000","name":"文件夹 32000","size":"33k","type":"","date":"2019-02-29","childCols":[],"childData":[],"children":[{"id":"32210","parentId":"32200","name":"vxe-table 从入门到住院 32210.pdf","size":"75k","type":"pdf","date":"2019-12-13","childCols":[],"childData":[],"checked":false},{"id":"32220","parentId":"32200","name":"文件夹 32220","size":"33k","type":"","date":"2019-08-12","childCols":[],"childData":[],"children":[{"id":"32221","parentId":"32220","name":"vxe-table 从入门到放弃 32221.pdf","size":"85k","type":"pdf","date":"2019-12-30","childCols":[],"childData":[],"checked":false},{"id":"32222","parentId":"32220","name":"vxe-table 从入门到住院 32222.ppt","size":"998k","type":"ppt","date":"2019-10-30","childCols":[],"childData":[],"checked":false},{"id":"32223","parentId":"32220","name":"vxe-table 从入门到精通 32223.xlsx","size":"95k","type":"xlsx","date":"2019-11-01","childCols":[],"childData":[],"checked":false}],"checked":false}],"checked":false},{"id":"32300","parentId":"32000","name":"文件夹 32300","size":"678k","type":"","date":"2019-01-10","childCols":[],"childData":[],"children":[{"id":"32310","parentId":"32300","name":"vxe-table 从入门到精通 32310.mp4","size":"75k","type":"mp4","date":"2019-11-09","childCols":[],"childData":[],"checked":false},{"id":"32320","parentId":"32300","name":"文件夹 32320","size":"88k","type":"","date":"2019-08-08","childCols":[],"childData":[],"children":[{"id":"32321","parentId":"32320","name":"音乐 32321.mp3","size":"5k","type":"mp3","date":"2019-03-07","childCols":[],"childData":[],"checked":false},{"id":"32322","parentId":"32320","name":"在线观看 32322.avi","size":"5k","type":"avi","date":"2019-09-09","childCols":[],"childData":[],"checked":false},{"id":"32323","parentId":"32320","name":"音乐 32323.mp3","size":"576k","type":"mp3","date":"2019-09-04","childCols":[],"childData":[],"checked":false}],"checked":false}],"checked":false}],"checked":false},{"id":"33000","parentId":"30000","name":"在线文档 33000.txt","size":"95k","type":"txt","date":"2019-01-14","childCols":[],"childData":[],"checked":false},{"id":"34000","parentId":"30000","name":"vxe-table 从入门到住院 34000.avi","size":"786k","type":"avi","date":"2019-01-17","childCols":[],"childData":[],"checked":false},{"id":"35000","parentId":"30000","name":"在线学习 35000.mp4","size":"286k","type":"mp4","date":"2019-02-19","childCols":[],"childData":[],"checked":false},{"id":"36000","parentId":"30000","name":"vue3.0 入门教程 36000.pdf","size":"870k","type":"pdf","date":"2019-12-27","childCols":[],"childData":[],"checked":false}],"checked":false},{"id":"40000","parentId":null,"name":"文件夹 40000","size":"26k","type":"mp4","date":"2019-03-04","childCols":[],"childData":[],"children":[{"id":"41000","parentId":"40000","name":"xxx 41000.mp4","size":"135k","type":"mp4","date":"2019-02-03","childCols":[],"childData":[],"checked":false}],"checked":false},{"id":"50000","parentId":null,"name":"vxe-table 从入门到废弃 50000.avi","size":"498k","type":"avi","date":"2019-12-02","childCols":[],"childData":[],"children":[],"checked":false}]');      
      
    </script>
    <script>
      var vueApp = new Vue({
        el: '#app',
        data: function(){
          return {
            tableData: [
            ]
          }
        },
        mounted: function(){
          console.log(window.data)
          this.tableData = window.data;
        },  
        methods:{
         
        }
       
      })  
      
    </script>
  </body>  
</html>
